<template>
	<view class="Com_date">
		<uni-popup ref="Compopup" type="bottom" @change="Onchange">
			<view class="picker_bos">
				<viwe class="title">
					<view class="title_qx" @click="Oncancel">取消</view>
					<view class="title_xz">选择日期</view>
					<view class="title_qd" @click="bindPickerChange">确定</view>
				</viwe>
				<view class="picker_box" v-if="pickerif">
					<picker-view :value="p_index" :indicator-style="indicatorStyle" @change="Onchangecity"
						class="picker-view">
						<picker-view-column>
							<view class="picker_item" v-for="(item,index) in dateList[0]" :key="index">{{item}}年
							</view>
						</picker-view-column>
						<picker-view-column>
							<view class="picker_item" v-for="(item,index) in dateList[1]" :key="index">{{item}}月
							</view>
						</picker-view-column>
						<picker-view-column>
							<view class="picker_item" v-for="(item,index) in dateList[2]" :key="index">{{item}}号
							</view>
						</picker-view-column>
					</picker-view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default {
		components: {
			uniPopup
		},
		name: "ComDate",
		data() {
			return {
				pickerif: false, //异步
				p_index: [], //下标
				indicatorStyle: `height: 100rpx;`,
				dateList: [
					[],
					[],
					[]
				], //时间
			};
		},
		mounted() {
			this.getDate()
		},
		methods: {
			//切换
			Onchangecity(e) {
				this.p_index = e.detail.value
			},
			//获取时间
			getDate() {
				let date = new Date();
				let dateList = []
				//年
				let years = [];
				for (let i = 2021; i <= date.getFullYear() + 10; i++) {
					years.push("" + i);
				}
				dateList.push(years)

				//月
				let months = [];
				for (let i = 1; i <= 12; i++) {
					if (i < 10) {
						i = "0" + i;
					}
					months.push("" + i);
					dateList.push(months)
				}
				//日
				let days = []
				dateList.push(days)
				this.dateList = dateList
				//绑定下表
				this.Onindex()
				this.pickerif = true
			},
			//绑定下表
			Onindex(e) {
				let date = new Date();
				let p_index = []
				this.dateList[0].forEach((item, index) => {
					if (item == date.getFullYear()) {
						p_index.push(index)
					}
				})
				this.dateList[1].forEach((item, index) => {
					if (parseInt(item) == date.getMonth() + 1) {
						p_index.push(index)
					}
				})
				p_index.push(0)
				this.p_index = p_index
				//转化日期
				this.Ondays(e)
			},
			//日期
			Ondays(e) {
				let num = this.p_index[1] + 1
				let days = []
				if (num == 1 || num == 3 || num == 5 || num == 7 || num == 8 || num == 10 || num == 12) { //判断31天的月份
					for (let i = 1; i <= 31; i++) {
						if (i < 10) {
							i = "0" + i;
						}
						days.push("" + i);
					}
				} else if (num == 4 || num == 6 || num == 9 || num == 11) { //判断30天的月份
					for (let i = 1; i <= 30; i++) {
						if (i < 10) {
							i = "0" + i;
						}
						days.push("" + i);
					}
				} else if (num == 2) { //判断2月份天数
					let year = parseInt(this.dateList[0][this.p_index[0]]);
					if (((year % 400 == 0) || (year % 100 != 0)) && (year % 4 == 0)) {
						for (let i = 1; i <= 29; i++) {
							if (i < 10) {
								i = "0" + i;
							}
							days.push("" + i);
						}
					} else {
						for (let i = 1; i <= 28; i++) {
							if (i < 10) {
								i = "0" + i;
							}
							days.push("" + i);
						}
					}
				}
				let date = new Date();
				days.forEach((item, index) => {
					if (parseInt(item) == date.getDate()) {
						this.p_index[2] = index
					}
				})
				this.dateList[2] = days
				if (e == true) {
					this.$refs.Compopup.close()
				}
			},
			//打开
			Onopen() {
				this.$refs.Compopup.open()
			},
			Onchange(e) {},
			//取消
			Oncancel() {
				this.$refs.Compopup.close()
			},
			//确定
			bindPickerChange() {
				let detail = this.p_index
				let data = this.dateList[0][detail[0]] + '-' +
					this.dateList[1][detail[1]] + '-' +
					this.dateList[2][detail[2]]
				let d_data = new Date(Date.parse(data.replace(/-/g, "/")));
				let new_data = new Date();
				if (d_data > new_data) {
					this.$emit('OnDate', data)
					this.$refs.Compopup.close()
				} else {
					data = new_data.getFullYear() + '-' + (new_data.getMonth() + 1) + '-' + new_data.getDate()
					this.$emit('OnDate', data)
					this.Onindex(true)
				}
			},

		}
	}
</script>

<style lang="less">
	.Com_date {
		.picker_bos {
			height: 600rpx;
			width: 750rpx;
			background: #ffffff;
			border-radius: 30rpx 30rpx 0 0;

			.title {
				width: 690rpx;
				height: 80rpx;
				padding: 0 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 30rpx;

				.title_qx {
					color: #969696;
				}

				.title_qd {
					color: #6ccbb6;
				}
			}

			.picker_box {
				height: 520rpx;
				width: 750rpx;

				.picker-view {
					height: 520rpx;
					width: 750rpx;

					.picker_item {
						width: 250rpx;
						height: 100rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						text-align: center;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						font-size: 30rpx;
						color: #323232;
					}
				}

			}
		}
	}
</style>
